<template>
	<div class='system-add-user-container'>
		<el-dialog title='新增用户' v-model='isShowDialog' width='769px'>
			<el-form :model='ruleForm' size='default' label-width='90px'>
				<el-row :gutter='35'>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='账户名称'>
							<el-input v-model='ruleForm.userName' placeholder='请输入账户名称' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='用户昵称'>
							<el-input v-model='ruleForm.userNickname' placeholder='请输入用户昵称' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='关联角色'>
							<el-select v-model='ruleForm.roleSign' placeholder='请选择' clearable class='w100'>
								<el-option v-for='option in roles' :label='option.roleName' :value='option.roleName'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='部门'>
							<el-cascader
								:options='deptData'
								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
								placeholder='请选择部门'
								clearable
								class='w100'
								v-model='ruleForm.department'
							>
								<template #default='{ node, data }'>
									<span>{{ data.deptName }}</span>
									<span v-if='!node.isLeaf'> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='手机号'>
							<el-input v-model='ruleForm.phone' placeholder='请输入手机号' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='邮箱'>
							<el-input v-model='ruleForm.email' placeholder='请输入' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='性别'>
								<el-select v-model="ruleForm.sex" placeholder="请选择">
									<el-option
									v-for="item in sexes"
									:key="item.value"
									:label="item.label"
									:value="item.value">
									</el-option>
										</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='账户密码'>
							<el-input v-model='ruleForm.password' placeholder='请输入' type='password' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='账户过期'>
							<el-date-picker v-model='ruleForm.overdueTime' type='date' placeholder='请选择'
															class='w100'></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='用户状态'>
							<el-switch v-model='ruleForm.status' inline-prompt active-text='启' inactive-text='禁'></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' class='mb20'>
						<el-form-item label='用户描述'>
							<el-input v-model='ruleForm.describe' type='textarea' placeholder='请输入用户描述' maxlength='150'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class='dialog-footer'>
					<el-button @click='onCancel' size='default'>取 消</el-button>
					<el-button type='primary' @click='onSubmit' size='default'>新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { UserAddState, userMenuApi } from '/@/api/user';
import { deptMenuApi } from '/@/api/dept';
import { roleMenuApi } from '/@/api/role';

export default defineComponent({
	name: 'systemAddUser',
	setup() {
		// 默認之
		const state = reactive<UserAddState>({
			isShowDialog: false,
			ruleForm: {
				userName: 'huzhanglin', // 账户名称
				userNickname: '胡章林', // 用户昵称
				roleSign: 'admin', // 关联角色
				department: ['vueNextAdmin'], // 部门
				phone: '15972740935', // 手机号
				email: '799490931@qq.com', // 邮箱
				sex: 1, // 性别
				password: '123456', // 账户密码
				overdueTime: '2022-05-16', // 账户过期
				status: true, // 用户状态
				describe: '123', // 用户描述
			},
			deptData: [], // 部门数据
			roles: [],//角色
			sexes: [],
		});

		const deptApi = deptMenuApi();
		const roleApi = roleMenuApi();
		const userApi = userMenuApi();
		const myConsole =console;

		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			myConsole.log('onSubmit =====' + JSON.stringify(state.ruleForm));
		 
			closeDialog();
		};

		// 页面加载时
		onMounted(() => {
				// 初始化部门数据
			state.deptData.push(deptApi.initData());
			// state.roles.push(roleApi.initRoleData())
			state.roles = roleApi.initRoleData();
			let arr = userApi.initSex();
			for (let i = 0; i < arr.length; i++){
				state.sexes.push({
					label: arr[i].label,
					value: arr[i].value,
				}) ;
			}
			
		});
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
